﻿<html>
<head>
    <title>MySpace</title>
    <link rel="shortcut icon" href="images/ico.jpg"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
    <script src="plugin/SuperSlide/js/jquery.min.js"></script>
    <script src="plugin/SuperSlide/js/userScript.js" charset="UTF-8"></script>
    <script src="plugin/SuperSlide/js/headInfo.js" charset="UTF-8"></script>
</head>
<body>
<header>
    <div class="logo">
        <img src="/MySpace/avatar/default.jpg" class="xwcms" id="head_avatar"/>
        <div class="logo-text"></div>
        <span style="color:#ff6347;font-size:1.4em;">'S</span> SPACE
    </div>
    <div class="right-block">
        <div style="font-size: 1.5em">welcome</div>
        <br>
        <div class="signature">这个人很懒什么都没有留下</div>
    </div>
</header>
<div class="clear">
</div>
<nav id="nav" class="nav-wrap">
    <ul class="clearfix">
        <li>
            <a href="index.html">
                广场
            </a>
        </li>
        <li>
            <a href="./blogs.html">
                我的博客
            </a>
        </li>
        <li>
            <a href="./writing.html">
                写博客
            </a>
        </li>
        <li>
            <a href="./friends.html">
                我的关注
            </a>
        </li>

        <li id="navEnd" class="menuactive">
            <a href="./moreinfo.html" id="aboutUser">
                关于我
            </a>
        </li>
    </ul>
</nav>


<section class="container-content">
    <div class="article-list">
        <form action="./updateUserInfo" enctype="multipart/form-data" method="POST">
            <div class="calssField">
                <div class="field">
                    <label for="user_name">昵称</label>
                    <br>
                    <input placeholder="昵称" style="height: 35px;width: 100%;font-size: 20px"
                           name="user[name]" id="user_name">
                </div>
            </div>
            <div class="field">
                <label for="user_signature">个性签名</label>
                <br>
                <input placeholder="个性签名" style="height: 35px;width: 100%;font-size: 20px"
                       name="user[signature]" id="user_signature">
            </div>
            <div class="field">
                <label>性别</label>
                <br>
                男：<input placeholder="性别" type="radio" value="1" id="man" name="sex"
                         style="height: 15px;width: 3%;font-size: 20px;vertical-align: bottom">
                女：<input placeholder="性别" type="radio" value="0" id="woman" name="sex"
                         style="height: 15px;width: 3%;font-size: 20px;vertical-align: bottom">
            </div>
            <div class="field">
                <label for="user_age">年龄</label>
                <br>
                <input placeholder="年龄" style="height: 35px;width: 100%;font-size: 20px"
                       name="user[age]" id="user_age">
            </div>
            <div class="field">
                <label for="user_birthday">生日</label>
                <br>
                <input placeholder="生日" style="height: 35px;width: 100%;font-size: 20px"
                       name="user[birthday]" id="user_birthday">
            </div>
            <div class="field">
                <label for="user_location">所在地</label>
                <br>
                <input placeholder="所在地" style="height: 35px;width: 100%;font-size: 20px"
                       name="user[location]" id="user_location">
            </div>

            <input class="isMe" onchange="replaceAvatar()" name="avatar" class="avatarUpload" type="file" style="width: 0px;height: 0px"
                   accept=".jpg,.png,.jepg,.tiff">
            <button class="fanButton" type="button" style="visibility: hidden;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);background-color: beige;width:50px;font-size: 20px" onclick="fan()" >关注</button>
            <div class="field">
                <br>
                <input class="isMe" type="submit"
                       style="background-color: beige; height: 35px;width: 50px; font-size: 20px">
            </div>
        </form>

    </div>
    </div>
    <script type="text/javascript">
        function upLoadAvatar() {
            $("input[name='avatar']").click();
        }
        function replaceAvatar() {
            var file = $("input[name='avatar']").prop("files");
            $(".largeAvatar").attr("src",window.URL.createObjectURL(file[0]));
        }
    </script>
    <div class="right-fun">
        <div class="avaterDiv" style="width: 280px;height: 280px ">
            <div style="text-align: center;">
                <img src="/MySpace/avatar/default.jpg" class="largeAvatar" style="width: 80%;height: 80% "/>

                <div style=" height: 45px;width: 80%;margin:0 auto">

                    <button class="isMe" onclick="upLoadAvatar()" style="-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);margin-top: 15px;background-color: beige;width: 85px;font-size: 20px">上传头像
                    </button>
                </div>

            </div>

        </div>
    </div>
</section>

<div class="clear">
</div>

<footer class="footer">
    <div class="footer_content">
        <h2>周末<span style="color:#FF6347;">'S</span> 博客</h2>
        <p>由<a href="./error.html" target="_blank" style="color:white;text-decoration:underline;">周元俊博客</a>提供技术支持
        </p>
        <p>© 2013－2019 youtiy.com, all rights reserved</p>
    </div>
</footer>
<section class="banner">
    <form>

    </form>
</section>

<script src="plugin/SuperSlide/js/jquery.min.js"></script>
<!-- <script src="js/jquery-1.12.4.min.js"></script> -->
<script src="plugin/SuperSlide/js/superslide.2.1.js"></script>
<script type="text/javascript">
    jQuery(".youtiy_slider .bd li").first().before(jQuery(".youtiy_slider .bd li").last());
    jQuery(".youtiy_slider").hover(function () {
        jQuery(this).find(".arrow").stop(true, true).fadeIn(300)
    }, function () {
        jQuery(this).find(".arrow").fadeOut(300)
    });
    jQuery(".youtiy_slider").slide(
        {
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "leftLoop",
            autoPlay: true,
            vis: 3,
            autoPage: true,
            trigger: "mouseover"
        }
    );


    $(document).ready(function (e) {
        var offset = 890;
        $(window).on('scroll', function () {
            if ($(this).scrollTop() > offset) {
                $('.recommend').css('position', 'fixed');
                $('.recommend').css('top', '0px');
            } else {
                $('.recommend').css('position', '');
            }
        });
    });
</script>
</body>
</html>